<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="bp" value="${pageContext.request.contextPath}"/>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户中心</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div style = "margin-left: 700px;margin-top: 100px" >
    <table border="1px">
        <thead>
        <tr>
            <th style="width: 12%">序号</th>
            <th style="width: 20%">用户名</th>
            <th style="width: 10%">密码</th>
            <td style="width: 14%">操作</td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${userList}" var="keyword" varStatus="id">
            <tr>
                <td>${keyword.uid}</td>
                <td>${keyword.username}</td>
                <td>${keyword.password}</td>
                <td>
                    <button onclick = "deleteById(${keyword.uid})">删除</button>

                    <button onclick = "findById(${keyword.uid})" data-toggle="modal" data-target="#myModal">更新</button>&nbsp;
                </td>

            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    更新用户
                </h4>
            </div>
            <div class="modal-body">
                <label>序&nbsp;&nbsp;&nbsp;&nbsp;号:</label><input type="text" id="uid"  value="" ><br>
                <label>用户名:</label><input type="text" id="username"  value="" ><br>
                <label>密&nbsp;&nbsp;&nbsp;&nbsp;码:</label><input type="text" id="password"  value="" ><br>
            </div>
            <div class="modal-footer">
                <button onclick="update()" type="button" class="btn btn-primary">
                    修改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">

        function deleteById(uid) {
            $.ajax({
                type:"get",
                url:"${bp}/user/delete?uid=" + uid,
                success : function (msg) {
                    if(msg == 1){
                        alert("删除成功")
                        window.location.reload()
                    }else{
                        alert("删除失败")
                    }
                }
            })
        }
        function findById(uid) {
            $.ajax({
                type:"get",
                url:"${bp}/user/findById",
                data:{"uid":uid},
                success : function (result) {
                    var parsedJson = jQuery.parseJSON(result);
                    var uid = parsedJson.uid
                    var username = parsedJson.username
                    var password = parsedJson.password
                    document.getElementById("uid").value=uid
                    document.getElementById("username").value=username
                    document.getElementById("password").value=password
                }
            })
        }
        function update() {
            var uid = $("#uid").val()
            var username = $("#username").val()
            var password = $("#password").val()
            $.ajax({
                type:"post",
                url:"${bp}/user/update",
                data:{"uid":uid,"username":username,"password":password},
                success : function (msg) {
                    if(msg == 1){
                        alert("修改成功")
                        window.location.reload()
                    }else{
                        alert("修改失败")
                    }
                }
            })
        }
</script>

</html>
